import { doFetch, getFetch } from '@/utils/doFetch';
import { CloseOutlined, EditFilled, LoadingOutlined, PlusOutlined, TagOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { ColorPicker, Empty, Input, message, Popover, Space, Tag, theme, Tooltip } from 'antd';
import { useEffect, useRef, useState } from 'react';
import Tagedit from './tagedit';
const defaultColor = [
  '#000000',
  '#000000E0',
  '#000000A6',
  '#00000073',
  '#00000040',
  '#00000026',
  '#0000001A',
  '#00000012',
  '#0000000A',
  '#00000005',
  '#F5222D',
  '#FA8C16',
  '#FADB14',
  '#8BBB11',
  '#52C41A',
  '#13A8A8',
  '#1677FF',
  '#2F54EB',
  '#722ED1',
  '#EB2F96',
  '#F5222D4D',
  '#FA8C164D',
  '#FADB144D',
  '#8BBB114D',
  '#52C41A4D',
  '#13A8A84D',
  '#1677FF4D',
  '#2F54EB4D',
  '#722ED14D',
  '#EB2F964D',
];


const Tagadderc = ({ max = 20, project, kanbansparams, refreshlist, setInitialState, token }) => {

  //查询当前项目下的所有标签
  const { data, loading, refresh } = useRequest(
    async () => {
      let res = await getFetch({
        url: '/projectTag',
        params: {
          projectId: project.id,
        },
      });
      return res?.data?.dataList;
    },
    {
      refreshDeps: [project?.id],
      onSuccess: () => {
      }
    },
  );

  const updateTags = (vals) => {
    return setInitialState(s => ({
      ...s,
      kanbansparams: {
        ...s.kanbansparams,
        projectTagIds: vals
      }
    }))
  }




  return (
    loading ?
      <div className="sorts">
        <LoadingOutlined></LoadingOutlined>
      </div>
      :
      data?.length === 0 ?
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
        :
        <Space wrap style={{ paddingTop: 4, justifyContent: 'flex-start', gap: 8 }}>
          {data?.map?.((tag, index) => {
            const isLongTag = tag?.name?.length > 8;
            const tagElem = (
              <Tag
                key={tag.name}
                style={{
                  cursor: 'pointer',
                  color: kanbansparams.projectTagIds.includes(tag.id) ? "#fff" : tag.color,
                  backgroundColor: kanbansparams.projectTagIds.includes(tag.id) ? (tag.color ? tag.color : token.colorPrimary) : "transparent",
                }}
                onClick={() => {
                  let curtags = kanbansparams.projectTagIds;
                  if (curtags.includes(tag.id)) {
                    curtags = curtags.filter(curtag => curtag !== tag.id);
                  } else {
                    curtags = [...curtags, tag.id];
                  }
                  updateTags(curtags)
                }}
                bordered={false}
              >
                <span>
                  {isLongTag ? `${tag.name.slice(0, 8)}...` : tag.name}
                </span>
              </Tag>
            );
            return isLongTag ? (
              <Tooltip title={tag.name} key={tag.name}>
                {tagElem}
              </Tooltip>
            ) : (
              tagElem
            );
          })}
        </Space>
  );
};


const Tagadder = (props) => {
  const { token } = theme.useToken();
  const { isMine, kanbansparams, project, setInitialState } = props;
  const [isEditting, setIsEditting] = useState(false);
  const content = !isEditting ? <Tagadderc {...props} token={token} /> : <Tagedit {...props} token={token} />;
  function clearall() {
    setInitialState(s => ({
      ...s,
      kanbansparams: {
        ...s.kanbansparams,
        projectTagIds: []
      }
    }))
  }

  useEffect(() => {
    clearall()
  }, [project]);


  return <Popover
    content={content}
    title={<div className='spread'>
      <span>
        标签筛选
        {kanbansparams.projectTagIds.length > 0 && <a style={{ color: token.colorPrimary, fontSize: 12, paddingLeft: 4 }} onClick={() => {
          clearall()
        }}>清空</a>}
      </span>
      {isMine &&
        <div className='sorts' style={{ cursor: "pointer" }} onClick={() => {
          setIsEditting(!isEditting)
        }}>
          {isEditting ? <CloseOutlined style={{ color: token.colorError }} /> : <EditFilled style={{ color: token.colorPrimary }} />}
        </div>
      }
    </div>}
    trigger={['click']}
    destroyTooltipOnHide={true}
    zIndex={99}
    overlayStyle={{ width: 300 }}
    placement="bottomRight"
  >
    <div
      className="sorts"
      style={{
        backgroundColor: kanbansparams.projectTagIds.length > 0 ? token.colorPrimary : 'transparent',
        color: kanbansparams.projectTagIds.length > 0 ? "#fff" : token.colorText,
      }}
    >
      <TagOutlined />
    </div>
  </Popover>
}

export default Tagadder;
